function Meteor (option) {
    this.width = option.width || 20
    this.height = option.height || 20
    this.vx = option.vx || 2
    this.vy = option.vy || 2
    this.x = option.px || 0
    this.y = option.py || 0
    this.img = option.img
    this.direction = option.direction || '2'
    this.angle = option.angle || option.oriAngle
    this.path = option.path
    this.pathIndex = 0
    this.shift = 0
    this.oriX = this.x
    this.oriY = this.y
    this.delay = option.delay || 0
    this.oriAngle = option.oriAngle || 0
}

Meteor.prototype.draw = function (ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(this.angle * Math.PI / 180)
    ctx.drawImage(this.img, -this.width / 2, -this.height / 2, this.width, this.height)
    ctx.restore()
}

function ProgressBar (opt) {
    this.width = opt.width
    this.height = opt.height
    this.bgColor = opt.backgroundColor
    this.frontColor = opt.frontColor
    this.tan = Math.tan(30 * Math.PI / 180)
    this.canvasId = opt.canvasId
}
/**
 * @description
 * @param {*} id
 */
ProgressBar.prototype.init = function (id) {
    let canvas = document.getElementById(id)
    canvas.width = this.width
    canvas.height = this.height
    this.ctx = canvas.getContext('2d')
}
ProgressBar.prototype.drawFrame = function (shiftLength) {
    this.ctx.save()
    this.ctx.fillStyle = this.bgColor
    this.ctx.strokeStyle = this.frontColor
    this.ctx.fillRect(0, 0, this.width, this.height)
    this.ctx.strokeRect(0, 0, this.width, this.height)
    this.ctx.restore()
    this.ctx.beginPath()
    this.ctx.moveTo(0, 0)
    this.ctx.fillStyle = this.frontColor
    this.ctx.lineWidth = 1
    this.ctx.lineTo(this.height * this.tan, this.height)
    this.ctx.lineTo(this.height * this.tan + shiftLength, this.height)
    this.ctx.lineTo(shiftLength, 0)
    this.ctx.closePath()
    this.ctx.fill()
    this.ctx.restore()
}
ProgressBar.prototype.progressing = function (percent) {
    this.init(this.canvasId)
    if (percent > 1) { percent = percent / 100 }
    let corner = this.height * this.tan
    let tan = this.tan
    let ctx = this.ctx
    let barriers = []
    let shiftLength = Math.round((this.width - corner) * percent)
    let barrierW = 5
    let barrierH = this.height - 2
    this.drawFrame(shiftLength)
    for (let i = -5; i <= shiftLength; i += 15) {
        let leftTop = i
        barriers.push(new WhiteBar({
            width: barrierW,
            height: barrierH,
            x: leftTop,
            y: 1,
            tan,
            ctx,
            max: shiftLength
        }))
    }
    let draw = () => {
        ctx.clearRect(0, 0, this.width, this.height)
        this.drawFrame(shiftLength)
        if (barriers[barriers.length - 1].x > shiftLength) {
            barriers.pop()
        }
        if (barriers[0].x > 10) {
            barriers.unshift(new WhiteBar({
                width: barrierW,
                height: barrierH,
                x: -5,
                y: 1,
                tan,
                ctx,
                max: shiftLength
            }))
        }
        barriers.forEach(item => {
            item.draw()
            item.x++
        })
        window.requestAnimationFrame(draw)
    }
    draw()
    return this
}
function WhiteBar (opt) {
    this.width = opt.width
    this.height = opt.height
    this.x = opt.x
    this.y = opt.y
    this.tan = opt.tan
    this.ctx = opt.ctx
    this.max = opt.max
}
WhiteBar.prototype.draw = function () {
    this.ctx.save()
    this.ctx.beginPath()
    this.ctx.fillStyle = '#fff'
    this.ctx.lineWidth = 1
    if (this.x < 0) {
        this.ctx.moveTo(0, this.y)
        this.ctx.lineTo(this.height * this.tan, this.height + this.y)
        this.ctx.lineTo(this.x + this.width + this.height * this.tan, this.height + this.y)
        this.ctx.lineTo(this.x + this.width, this.y)
    } else if (this.x + this.width > this.max) {
        this.ctx.moveTo(this.x, this.y)
        this.ctx.lineTo(this.x + this.height * this.tan, this.height + this.y)
        this.ctx.lineTo(this.max + this.height * this.tan, this.height + this.y)
        this.ctx.lineTo(this.max, this.y)
    } else {
        this.ctx.moveTo(this.x, this.y)
        this.ctx.lineTo(this.x + this.height * this.tan, this.height + this.y)
        this.ctx.lineTo(this.x + this.height * this.tan + this.width, this.height + this.y)
        this.ctx.lineTo(this.x + this.width, this.y)
    }
    this.ctx.fill()
    this.ctx.closePath()
    this.ctx.restore()
    return this
}

export {
    Meteor,
    ProgressBar
}
